<template>
  <div>
    <el-button  class="add-user" type="success" @click="addUser">添加用户</el-button>
    <el-table :data="users" stripe :header-cell-style="{background:'#eef1f6',color:'#606266'}">
        <el-table-column prop="userName" label="用户名">
        </el-table-column>

        <!-- <template  slot-scope="scope">
            <el-table-column prop="user_name" label="用户名">
            </el-table-column>
            <el-table-column prop="password" label="密码">
            </el-table-column>
        </template> -->
        <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
            <el-button @click="update(scope.row)" type="text" size="small">修改密码</el-button>
            <el-button type="text" size="small" @click="remove(scope.row)">删除</el-button>
        </template>
        </el-table-column>
    </el-table>
    <common-modal v-show="is_show" v-on:closeme="close" v-on:confirm="confirm">
            <div slot="body">
                用户名：<el-input v-model="user_name" placeholder="请输入内容"></el-input>
            </div>
            <div slot="body" style="margin-top:2%;">
                密码：<el-input v-model="password" placeholder="请输入内容"></el-input>
            </div>        
    </common-modal>
  </div>
</template>

<script>
  import test_data from '../../json/test_data.json'
  import commonModal from '../../components/commonModal.vue'
  export default{
    components:{
        'common-modal':commonModal
    },      
      data(){
          return {
              users:[],
              user_name:"",
              password:"",
              is_show:false
          }
      },
      mounted:function(){
          //this.users=test_data.users_new;
          //this.getUsers();
      },
      methods:{
          addUser(){
              this.is_show=true;
          },
          getUsers(){
            this.$ajax({
                method: 'post',
                url: 'user/show_users',
                data: {
                "page":"1",
                "page_size":"30"
                }
            }).
            then(res => {
                
                let users=res.data.data;
                this.users=users;
                console.log(users)
                
            });               
          },
          close(){
              this.is_show=false;
          },
          confirm(){
              //这里调接口
              console.log(this.user_name,this.password)
              this.is_show=false;
            this.$ajax({
                method: 'post',
                url: 'user/register',
                data: {  //post传参，使用的key必须是data
                "user_name":this.user_name,
                "password":this.password
                }
            }).
            then(res => {
                console.log(res)
                let code=res.data.code;
                if(code==2){
                    this.getUsers();
                    this.$message.success("新用户添加成功！");
                    
                }else if(code==1){
                    this.$message.error("添加失败，该用户名已被占用！");
                }else{
                    this.$message.error("未知错误！");
                }
                
            });                
              
          },
          update(row){
            console.log(row)
            this.$prompt('请输入新密码', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            }).then(({ value }) => {
            //这里连后端
            
            this.$ajax({
                method: 'post',
                url: 'user/update_password',
                data: {
                "user_name":row.userName,
                "password":value
                }
            }).
            then(res => {
                console.log(res)
                this.$message({
                    type: 'success',
                    message: '密码修改成功！'
                });
                this.getUsers();
                
            });             


            }).catch(() => {
            this.$message({
                type: 'info',
                message: '取消输入'
            });       
            });
          },
          remove(row){
            this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //在这里调用删除接口
                console.log(row.userName);
                this.$ajax({
                    method: 'post',
                    url: 'user/remove_user',
                    data: {
                    "user_name":row.userName,

                    }
                }).
                then(res => {
                    console.log(res)
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    
                }); 

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
                     
          }
      },

  }
</script>


<style lang="scss" scoped>
    .add-user{
        margin: 0 0 2% 0 ;
    }
</style>
